<template>
  <a-modal
    :maskClosable="maskClosable"
    title="监控详情"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-table
      ref="table"
      rowKey="meter"
      size="middle"
      :pagination="false"
      :columns="columns"
      :dataSource="gDataSource"
    >
      <span slot="meter" slot-scope="text, record">
        {{
          meterCnMap[record.meter] ||
          containerMeterCnMap[record.meter] ||
          record.meter
        }}
      </span>
      <span slot="volume" slot-scope="text, record">
        {{
          record.volume ? parseFloat(record.volume).toFixed(2) + meterUnitMap[record.meter] : "加载中"
        }}
      </span>
    </a-table>
  </a-modal>
</template>
<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "DetailModal",
  mixins: [GwListMixin],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      model: {},
      columns: [
        {
          title: "监控项",
          dataIndex: "meter",
          scopedSlots: { customRender: "meter" },
        },
        {
          title: "实时值",
          dataIndex: "volume",
          scopedSlots: { customRender: "volume" },
        },
      ],
      url: {
        list: "/statistics/latestSample",
      },
      meterCnMap: {
        "vm.cpu_util": "虚拟机CPU利用率",
        "vm.memory_util": "虚拟机内存利用率",
      },
      containerMeterCnMap: {
        "k8s.cpu_util": "容器CPU利用率",
        "k8s.memory_util": "容器内存利用率",
      },
      meterUnitMap: {
        "vm.cpu_util": "%",
        "vm.memory_util": "%",
        "k8s.cpu_util": "%",
        "k8s.memory_util": "%",
      },
      maskClosable: false,
      volumeMap: {},
      volumeList: [],
    };
  },
  watch: {
    volumeList(val) {
      if (val && val.length === this.gDataSource.length) {
        let list = [];
        this.gDataSource.forEach((item) => {
          item.volume = this.volumeMap[item.meter];
          list.push(item);
        });
        this.gDataSource = list;
      }
    },
  },
  methods: {
    showModal(record) {
      this.model = Object.assign({}, record);
      this.volumeList = [];
      this.visible = true;
      this.loadData();
    },
    loadData() {
      this.gDataSource = [];
      this.gPagination.total = 0;
      this.gQueryParam.resourceId = this.model.id;
      let map = {};
      if (this.model.type === 1) {
        map = this.containerMeterCnMap;
      } else {
        map = this.meterCnMap;
      }
      Object.keys(map).forEach((item) => {
        this.gQueryParam.meter = item;
        this.gQueryParam.title = "精确管控与供电制冷联动-基础资源细粒度感知-指标监控";
        this.gDataSource.push({
          meter: item,
          volume: undefined,
        });
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          const data = res.data;
          if (res.success) {
            // this.gDataSource.push({
            //   meter: map[item],
            //   key: item,
            //   volume: data,
            // })
            this.volumeMap[item] = data;
            this.volumeList.push({
              meter: item,
              volume: data,
            });
          }
        });
      });
    },
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>
